import React,{useState,useRef} from 'react'
import { Card,Button } from 'antd';
import ReactECharts from 'echarts-for-react'
import './Charts.css'


/* 
  饼图路由
*/
export default function Pie() {

  const echart=useRef()

  const [data, setData] = useState(
    [
      {value: 1048, name: '搜索引擎'},
      {value: 735, name: '直接访问'},
      {value: 580, name: '邮件营销'},
      {value: 484, name: '联盟广告'},
      {value: 300, name: '视频广告'}
    ]
  );

  const update=()=>{
    setData(data=>{
      let diff=new Array(data.length).fill(0).map(i=>parseInt(Math.random()*200))
      let arr=data
      arr.map((i,index)=>{
        i.value+=diff[index]
        return i
      })
      echart.current.getEchartsInstance().setOption({series: [{data: arr,}]})
      return arr
    })
  }

  const title=<Button type='primary' onClick={()=>update()}>更新</Button>

  const getOption=()=>{
    return {
      title: {
        text: '某站点用户访问来源',
        left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
    }
  }

  return (
    <div>
      <Card title={title}>
        <ReactECharts ref={echart} option={getOption()} style={{height:'60vh'}}></ReactECharts>
      </Card>
    </div>
  )
}
